<template>
	<view class="balance-box">
		<view class="balance-child">
			<view class="body">
				<view class="body-top">
					<text>总余额(元)</text>
					<text class="balanceNum">0.00</text>
				</view>
				<view class="body-bottom">
					<view class="left">
						<text>充值余额(元)</text>
						<text>0.00</text>
					</view>
					<view class="right">
						<text>赠送余额(元)</text>
						<text>0.00</text>
					</view>
				</view>
			</view>
			<view class="btn">
				<button @click="toOnlineRechargePage">充值</button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	
	/**
	 * useTo: 跳转到在线充值页面 
	 */
	const toOnlineRechargePage = () => {
		uni.navigateTo({
			url: '/pages/followHeartMe/components/onlineRecharge'
		})
	}
</script>

<style scoped lang="scss">
	.balance-box {
		display: flex;
		justify-content: center;
		box-sizing: border-box;
		background-image: linear-gradient(
			to bottom, 
			rgba(16, 142, 233),
			rgba(16, 142, 233),
			rgba(16, 142, 233),
			rgba(71, 152, 242),
			rgba(71, 152, 242, .8), 
			rgba(71, 152, 242, .5),
			rgba(71, 152, 242, .2),
			rgba(168, 169, 255, 0), 
			rgba(168, 169, 255, 0), 
		);
		.balance-child {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 10rpx;
			padding-bottom: 20px;
			width: 90%;
			border-radius: 10px;
			background-color: #fff;
			box-shadow: 0 0 10px 0 #e7e7e7;
			.body {
				@include columnFlex;
				justify-content: center;
				align-items: center;
				width: 100%;
				padding: 40px 0;
				.body-top {
					@include columnFlex;
					.balanceNum {
						font-size: 30px;
						font-weight: 700;
					}
				}
				.body-bottom {
					@include flex;
					margin-top: 60px;
					width: 80%;
					.left,.right {
						@include columnFlex;
						align-items: center;
						text {
							font-size: 22px;
							&:first-child {
								font-size: 18px;
								color: $uni-info;
							}
						}
					}
				}
			}
			.btn {
				button {
					border-radius: 50rpx;
					background-color: $uni-primary;
					font-size: 16px;
					color: #fff;
					letter-spacing: 10px;
				}
				margin-top: 30px;
				width: 85%;
			}
		}
	}
</style>